<template>
  <div>
    <!-- <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
       <el-form-item label="商品名称" prop="name">
         <el-input v-model="queryParams.name" placeholder="请输入商品名称" clearable size="small" style="width: 240px"
                   @keyup.enter.native="handleQuery"/>
       </el-form-item>
       <el-form-item>
         <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
         <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
       </el-form-item>
     </el-form>-->
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleGetOrder">
          获取订单
        </el-button>
        <!--<el-date-picker
          v-model="dataValue"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>-->
        <el-date-picker
          v-model="dataValue.startTime"
          type="datetime"
          placeholder="选择日期"
          value-format="yyyy/MM/dd HH:mm:ss"
        />
        <span>-</span>
        <el-date-picker
          v-model="dataValue.endTime"
          type="datetime"
          placeholder="选择日期"
          value-format="yyyy/MM/dd HH:mm:ss"
        />
      </el-col>
    </el-row>

    <el-row>
      <el-col>
        <div style="width: 2000px" v-for="(item,index) in resultData.list" :key="index">
          <el-card :body-style="{ padding: '0px' }" @selection-change="handleSelectionChange">
            <el-row style="background-color: #e6e6e6;height: 35px">
              <el-col :span="1">
                <div class="grid-content">
                  <!-- <el-checkbox v-model="checked"></el-checkbox>-->
                </div>
              </el-col>
              <el-col :span="2">
                <div class="grid-content " style="text-align: right;">
                  <span>订单编号：</span>
                </div>
              </el-col>
              <el-col :span="4">
                <div class="grid-content" v-for="(v,i) in item.child">
                  <span>{{v.order_id}}</span>
                </div>
              </el-col>
              <el-col :span="2">
                <div class="grid-content" style="text-align: right;">
                  <span>订单类型：</span>
                </div>
              </el-col>
              <el-col :span="4">
                <div class="grid-content ">
                  <span v-if="item.order_type === 0">普通订单</span>
                  <span v-if="item.order_type === 2">虚拟订单</span>
                  <span v-if="item.order_type === 4">电子券</span>
                </div>
              </el-col>
              <el-col :span="2">
                <div class="grid-content" style="text-align: right;">
                  <span>下单时间：</span>
                </div>
              </el-col>
              <el-col :span="4">
                <div class="grid-content">
                  <time>{{item.create_time | formatDate}}</time>
                  <!--<time>{{item.create_time | fmtdate}}</time>-->
                </div>
              </el-col>
              <el-col :span="1">
                <div class="grid-content" style="text-align: right;">
                  <span>操作：</span>
                </div>
              </el-col>
              <el-col :span="2">
                <div class="grid-content">
                  <!-- <el-button size="mini" type="text" @click="handleSend()">发货
                   </el-button>-->
                  <el-button size="mini" type="text" @click="handleCall()">联系买家
                  </el-button>
                </div>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="3">
                <div>
                  <span>商品名称：{{item.child[0].product_name}}</span>
                  <!-- <div>
                     <el-button size="mini" type="text" @click="handleDetails()">详情
                     </el-button>
                   </div>-->
                </div>
              </el-col>
              <el-col :span="2">
                <div>
                  <el-image
                    style="width: 100px; height: 100px"
                    :src="item.child[0].product_pic"
                    fit="cover"></el-image>
                </div>
              </el-col>
              <el-col :span="4">
                <div>
                  <div>{{item.product_name}}</div>
                  <div>{{item.spec_desc}}</div>
                </div>
              </el-col>
              <el-col :span="3">
                <div>
                  <span>单价:{{item.child[0].total_amount | numFilter}}</span>
                </div>
              </el-col>
              <el-col :span="1">
                <div>
                  <span>个数：{{item.child[0].combo_num}}</span>
                </div>
              </el-col>
              <el-col :span="3">
                <div>
                  <div>用户留言：{{item.child[0].buyer_words}}</div>
                  <div>商家备注：{{item.child[0].seller_words}}</div>
                  <!--<div>
                    <el-button size="mini" type="text" @click="handleAdd()">添加
                    </el-button>
                  </div>-->
                </div>
              </el-col>
              <el-col :span="2">
                <div v-if="item.child[0].pay_type === 0">
                  <span>支付类型</span>-<span>货到付款</span>
                </div>
                <div v-if="item.child[0].pay_type === 1">
                  <span>支付类型</span>-<span>微信</span>
                </div>
                <div v-if="item.child[0].pay_type === 2">
                  <span>支付类型</span>-<span>支付宝</span>
                </div>
              </el-col>
              <el-col :span="2">
                <div>
                  <div>姓名：{{item.post_receiver}}</div>
                  <div>手机号：{{item.post_tel}}</div>
                  <div>
                    地址:{{item.post_addr.province.name}}{{item.post_addr.city.name}}{{item.post_addr.town.name}}{{item.post_addr.detail}}
                  </div>
                  <!--<div>
                    <el-button size="mini" type="text" @click="handleUpdate()">修改
                    </el-button>
                  </div>-->
                </div>
              </el-col>
              <el-col :span="1">
                <div>
                  <div v-if="item.child[0].order_status === 1">在线支付订单待支付；货到付款订单待确认</div>
                  <div v-if="item.child[0].order_status === 2">备货中</div>
                  <div v-if="item.child[0].order_status === 3">已发货</div>
                  <div v-if="item.child[0].order_status === 4">已取消</div>
                  <div v-if="item.child[0].order_status === 5">已完成</div>
                  <div v-if="item.child[0].order_status === 6">退货中-用户申请</div>
                  <div v-if="item.child[0].order_status === 7">退货中-商家同意退货</div>
                  <div v-if="item.child[0].order_status === 8">退货中-客服仲裁</div>
                  <div v-if="item.child[0].order_status === 9">已关闭-退货失败</div>
                  <div v-if="item.child[0].order_status === 10">退货中-客服同意</div>
                  <div v-if="item.child[0].order_status === 11">退货中-用户已填物流</div>
                  <div v-if="item.child[0].order_status === 12">退货成功-商户同意</div>
                  <div v-if="item.child[0].order_status === 13">退货中-再次客服仲裁</div>
                  <div v-if="item.child[0].order_status === 14">退货中-客服同意退款</div>
                  <div v-if="item.child[0].order_status === 15">退货-用户取消</div>
                  <div v-if="item.child[0].order_status === 16">退款中-用户申请(备货中)</div>
                  <div v-if="item.child[0].order_status === 17">退款中-商家同意(备货中)</div>
                  <div v-if="item.child[0].order_status === 21">退款成功-订单退款</div>
                  <div v-if="item.child[0].order_status === 22">退款成功-订单退款</div>
                  <div v-if="item.child[0].order_status === 20">退货成功-商户已退款</div>
                  <div v-if="item.child[0].order_status === 21">退款中-用户取消</div>
                  <div v-if="item.child[0].order_status === 22">退款中-商家拒绝</div>
                  <div v-if="item.child[0].order_status === 24">退货成功-商户已退款</div>
                  <div v-if="item.child[0].order_status === 25">退款中-用户取消</div>
                  <div v-if="item.child[0].order_status === 26">退款中-商家拒绝</div>
                  <div v-if="item.child[0].order_status === 27">退货中-等待买家处理</div>
                  <div v-if="item.child[0].order_status === 28">退货失败</div>
                  <div v-if="item.child[0].order_status === 29">退货中-等待买家处理</div>
                  <div v-if="item.child[0].order_status === 30">退款中-退款申请</div>
                  <div v-if="item.child[0].order_status === 31">退款申请取消</div>
                  <div v-if="item.child[0].order_status === 32">退款中-商家同意</div>
                  <div v-if="item.child[0].order_status === 33">退款中-商家拒绝</div>
                  <div v-if="item.child[0].order_status === 34">退款中-客服仲裁</div>
                  <div v-if="item.child[0].order_status === 35">退款中-客服同意</div>
                  <div v-if="item.child[0].order_status === 36">退款中-支持商家</div>
                  <div v-if="item.child[0].order_status === 37">已关闭-退款失败</div>
                  <div v-if="item.child[0].order_status === 38">退款成功-售后退款</div>
                  <div v-if="item.child[0].order_status === 39">退款成功-订单退款</div>
                </div>
              </el-col>
              <el-col :span="3">
                <div>
                  <div>价钱:{{item.child[0].total_amount | numFilter}}</div>
                  <div>商品总额：{{item.child[0].combo_amount | numFilter}}</div>
                  <div>运费:{{item.post_amount | numFilter}}</div>
                  <div>平台优惠券金额:{{item.child[0].coupon_amount | numFilter}}</div>
                  <div>商家优惠券金额:{{item.child[0].shop_coupon_amount | numFilter}}</div>
                </div>
              </el-col>
            </el-row>
          </el-card>
        </div>
      </el-col>
    </el-row>

    <el-dialog :title="title" :visible.sync="openUpdate" width="900px" append-to-body>
      <el-form ref="form" :model="tableData" :rules="rules" label-width="100px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="姓名" prop="tableData.post_receiver">
              <el-input v-model="tableData.post_receiver" placeholder="请输入姓名"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="手机号" prop="tableData.post_tel">
              <el-input v-model="tableData.post_tel" placeholder="请输入手机号"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="地址" prop="tableData.post_addr">
              <el-input v-model="tableData.post_addr" placeholder="请输入地址"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog :title="title" :visible.sync="openAdd" width="900px" append-to-body>
      <el-form ref="form" :model="tableDataAdd" :rules="rules" label-width="100px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="用户留言" prop="tableDataAdd.buyer_words">
              <el-input v-model="tableDataAdd.buyer_words" placeholder="请输入用户留言"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="商家备注" prop="tableDataAdd.seller_words">
              <el-input v-model="tableDataAdd.seller_words" placeholder="请输入商家备注"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageNum"
      :page-sizes="[10, 30, 50, 100]"
      :page-size="10"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
</template>

<script>
  import ElRow from "element-ui/packages/row/src/row";
  import ElCol from "element-ui/packages/col/src/col";
  import {formatDate} from '@/common/date'
  export default {
    components: {
      ElCol,
      ElRow
    },
    filters: {
      formatDate(time) {
        time = time * 1000
        let date = new Date(time)
        console.log(new Date(time))
        return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
      },
      numFilter(value) {
        let transformVal = Number(value / 100).toFixed(2)
        return transformVal

      }
    },
    data() {
      return {
        title: '',
        openUpdate: false,
        openAdd: false,
        // 显示搜索条件
        showSearch: true,
        checked: true,
        resultData: {},
        total: 0,
        pageNum: 0,
        pageSize: 10,
        insertData: {
          order_id: '',
          shop_id: '',
          pid: '',
          child_num: '',
          product_id: '',
          product_name: '',
          product_pic: '',
          combo_id: '',
          code: '',
          spec_desc: '',
          post_addr: '',
          post_code: '',
          post_receiver: '',
          post_tel: '',
          buyer_words: '',
          seller_words: '',
          logistics_id: '',
          logistics_code: '',
          logistics_time: '',
          receipt_time: '',
          order_status: '',
          order_type: '',
          create_time: '',
          update_time: '',
          exp_ship_time: '',
          cancel_reason: '',
          pay_type: '',
          pay_time: '',
          combo_amount: '',
          combo_num: '',
          post_amount: '',
          coupon_amount: '',
          shop_coupon_amount: '',
          coupon_meta_id: '',
          coupon_info: '',
          campaign_id: '',
          campaign_info: '',
          shop_full_campaign: '',
          total_amount: '',
          is_comment: '',
          urge_cnt: '',
          b_type: '',
          c_biz: ''
        },
        dataValue: {
          startTime: '',
          endTime: '',
        },
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          name: ''
        }
        ,
        tableData: [{
          spec_desc: '收件人地址',
          post_code: '收件人姓名',
          post_receiver: '收件人电话',
        }],
        tableDataAdd: [{
          buyer_words: '用户留言',
          seller_words: '卖家备注',
        }],
        // 表单校验
        rules: {
          spec_desc: [
            {required: true, message: "收件人地址不能为空", trigger: "blur"},
          ],
          post_code: [
            {required: true, message: "收件人姓名不能为空", trigger: "blur"},
          ],
          post_receiver: [
            {required: true, message: "收件人电话不能为空", trigger: "blur"},
          ]
        }
      }
    },
    methods: {
      handleSelectionChange(val){
        console.log('val', val)
        this.multipleSelection = val;
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.pageSize = val
        this.pageNum = 0
        this.handleGetOrder()
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.pageNum = val
        this.handleGetOrder()
      },
      submitForm: function () {
        this.$refs["tableData"].validate((valid) => {
          if (valid) {
            if (this.tableData.out_product_id != '') {
              updateUser(this.tableData).then((response) => {
                if (response.code === 200) {
                  this.msgSuccess("修改成功");
                  this.open = false;
                  this.getList();
                }
              });
            } else {
              addUser(this.tableData).then((response) => {
                if (response.code === 200) {
                  this.msgSuccess("新增成功");
                  this.open = false;
                  this.getList();
                }
              });
            }
          }
        });
      },
      async handleGetOrder() {
        if (this.pageNum === 0) {
          console.log('0')
          await this.$http
            .post(`/douyin/order/getOrderList/${this.pageNum}/${this.pageSize}`, this.dataValue)
            .then((response) => {
              if (response.data.message === "access_token已过期") {
                this.$message({
                  message: '请授权，再次使用该功能',
                  type: 'warning'
                });
                this.resultData = ""
              }
              var result = JSON.parse(response.data.message);
              //var result = response.data.dataMap.data;
              if (result.count == 0) {
                this.$message({
                  message: '此时间段没有订单数据',
                  type: 'warning'
                });
                this.resultData = ""
              } else {
                this.resultData = result
                this.total = result.total;
                console.log(this.resultData)
              }
            });
        } else {
          console.log('1')
          await this.$http
            .post(`/douyin/order/getOrderList/${this.pageNum - 1}/${this.pageSize}`, this.dataValue)
            .then((response) => {
              var result = JSON.parse(response.data.message);
              //var result = response.data.dataMap.data;
              console.log(result)
              if (result.count == 0) {
                this.$message({
                  message: '此时间段没有订单数据',
                  type: 'warning'
                });
                this.resultData = ""
              } else {
                this.resultData = result
                this.total = result.total;
                console.log(this.resultData)
              }
            });
        }

      },
      handleUpdate() {
        this.openUpdate = true;
        this.title = "修改";
      },
      handleAdd() {
        this.openAdd = true;
        this.title = "添加";
      },
      handleQuery() {

      },
      resetQuery() {
        this.queryParams.name = ''
      },
      cancel() {
        this.openUpdate = false;
        this.openAdd = false;
      }
    }
  }
</script>

<style>
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
</style>
